<script setup>
import {ref,reactive} from "vue"
let obj=reactive([{src:'/public/1.jpeg',title:'自组酒店商用',pay:379.00},
    {src:'/public/1.jpeg',title:'自组酒店商用',pay:379.00},
    {src:'/public/1.jpeg',title:'自组酒店商用',pay:379.00},
    {src:'/public/1.jpeg',title:'自组酒店商用',pay:379.00},
    {src:'/public/1.jpeg',title:'自组酒店商用',pay:379.00},
    {src:'/public/1.jpeg',title:'自组酒店商用',pay:379.00},
    {src:'/public/1.jpeg',title:'自组酒店商用',pay:379.00},
    {src:'/public/1.jpeg',title:'自组酒店商用',pay:379.00},
    {src:'/public/1.jpeg',title:'自组酒店商用',pay:379.00}
    
    ])
    let arr_num=reactive(["beijing","zhejiang","shanghai"])
    let obj1=reactive({xuehao:202306050101,xingmin:"张三",sex:"男"})
</script>
<template>
    <h1>列表渲染指令</h1>
    <div class="fat">
        <div v-for="(value,name) in obj":key="name" class="box">
            <img src="/public/1.jpeg">
            <p class="p1">{{value.title}}</p>
            <p class="p2">${{value.pay}}</p>
        </div>
    </div>
    <hr>
    <ul>
        <li v-for="item in arr_num">
            {{ item }}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for=" item,name in obj1">
            {{name}}:{{item}}
        </li>
    </ul>
</template>
<style  scoped>
 .fat{
    display:  flex;
    width: 1800px;
    flex-wrap: wrap;
    justify-content: left;
 }
 .box{
    width: 300px;
    height:500px;
    border-radius:10px;
    margin: 10px 10px;
 }
  .box img{
    width: 300px;
    height:300px;
    border-radius:10px;
 }
 .p1{padding: 5px;text-align: center;}
 .p2{margin: 30px 5px; color:blueviolet;font-weight: 30px;}
</style>